<template>
  <div class="page-home" ref="homeRef">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategory />
        <!-- 右侧轮播图 -->
        <HomeBanner />
      </div>
    </div>
    <!-- 新鲜好物 -->
    <HomeNew />
    <!-- 人气推荐 -->
    <homeHot/>
    <!-- 热门品牌 -->
    <homeBrand />
    <!-- 区域板块 -->
    <homeProduct />
    <!-- 最新专题 -->
    <homeSpecial />
  </div>
</template>

<script>
import HomeCategory from "./components/home-category.vue";
import HomeBanner from "./components/home-banner.vue";
import HomeNew from "./components/home-new.vue";
import homeHot from "@/views/Home/components/home-hot";
import homeBrand from "@/views/Home/components/home-brand";
import homeProduct from "@/views/Home/components/home-product";
import homeSpecial from '@/views/Home/components/home-special'
import { onActivated, onDeactivated, ref, nextTick } from 'vue';
import { useStore } from 'vuex';
import { _debonce } from '@/hooks/index.js'
import store from '@/store';
export default {
  name: "xtx-home-page",
  components: {
    HomeCategory,
    HomeBanner,
    HomeNew,
    homeHot,
    homeBrand,
    homeProduct,
    homeSpecial
  },
  setup() {
    // 页面page
    const homeRef = ref(null)

    const Store = useStore()



    let SCROLLTOP = 0
    const watchScroll = _debonce(() => {
      SCROLLTOP = document.documentElement.scrollTop
      // console.log(SCROLLTOP);
    }, 5)

    onActivated(() => {
      setTimeout(() => {
        document.documentElement.scrollTop = Store.getters.homeScrollTop
      }, 2)
      window.addEventListener('scroll', watchScroll)
    })
    onDeactivated(() => {
      Store.commit('Common/setHomeScrollTop', SCROLLTOP)
      window.removeEventListener('scroll', watchScroll)
    })

    return {
      homeRef
    }
  }
};
</script>

<style scoped lang="less">
</style>
